import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Menu, Layout } from 'antd';
import { withRouter, NavLink } from 'react-router-dom';
import SiderCloseSvg from './images/sider-close.svg';
import SiderOpenSvg from './images/sider-open.svg';
import cn from 'classnames';
import _ from 'lodash';
import './index.less';

const prefixCls = 'sider';
const { Item, SubMenu } = Menu;
const { Sider } = Layout;

const MySider = props => {
  const {
    content: { title, body, className },
    location
  } = props;
  const pathname = location.pathname;

  let defaultActivePath = [];

  const [collapse, setCollapse] = useState(false);

  const getMenuItems = (configs, path = []) => {
    return configs.map(item => {
      const { to, icon, name, children, Element = null } = item;
      const key = to || name;

      if (!defaultActivePath.length && to && _.startsWith(pathname, to)) {
        defaultActivePath = path.concat(key);
      }
      if (children) {
        return (
          <SubMenu
            popupClassName={`${prefixCls}-submenu-popup`}
            key={key}
            title={
              <a>
                {icon ? <i className={`icon icon-${icon}`} /> : null}
                {Element ? <Element /> : null}
                &nbsp;
                {<span className="item-name">{name}</span>}
              </a>
            }
          >
            {getMenuItems(children, path.concat(key))}
          </SubMenu>
        );
      } else {
        const strategyTemplateList = [
          '/asset-config/port-manage',
          '/asset-config/white-list',
          '/asset-config/probe-strategy',
          '/asset-config/strategy-template',
          '/asset-config/scan-speed',
          '/asset-config/dict-config'
        ];
        return (
          <Item key={key} title={null} className={'item'}>
            <NavLink
              to={to}
              activeStyle={{ color: '#fff' }}
              isActive={(match, location) => {
                if (
                  to === '/asset-config/target-manage' &&
                  strategyTemplateList.includes(location.pathname)
                ) {
                  return true;
                } else {
                  if (match && match.url && match.url === location.pathname) {
                    return true;
                  }
                }
                return false;
              }}
            >
              {icon ? <i className={`icon icon-${icon}`} /> : null}
              {Element ? <Element /> : null}
              &nbsp;
              {<span className="item-name">{name}</span>}
            </NavLink>
          </Item>
        );
      }
    });
  };

  const menuItems = getMenuItems(body);

  return (
    <Sider
      theme="dark"
      collapsedWidth={56}
      className={cn(className, prefixCls)}
      collapsed={collapse}
      width={136}
    >
      <div className="title">
        {!collapse && title && <span className="value">{title}</span>}
        <span className="collapse" onClick={() => setCollapse(!collapse)}>
          {collapse ? <img src={SiderCloseSvg} /> : <img src={SiderOpenSvg} />}
        </span>
      </div>
      <Menu
        mode="inline"
        defaultOpenKeys={defaultActivePath}
        defaultSelectedKeys={defaultActivePath}
      >
        {menuItems}
      </Menu>
    </Sider>
  );
};

MySider.propTypes = {
  location: PropTypes.object,
  content: PropTypes.shape({
    title: PropTypes.string,
    className: PropTypes.string,
    body: PropTypes.arrayOf(
      PropTypes.shape({
        icon: PropTypes.string,
        name: PropTypes.string,
        to: PropTypes.string,
        element: PropTypes.element,
        children: PropTypes.array
      })
    )
  })
};

export default withRouter(MySider);
